<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>登录</span>
            </div>
            <el-form
                :model="loginForm"
                ref="loginForm"
                :label-position="labelPosition"
                label-width="80px"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input
                        v-model="loginForm.pwd"
                        type="password"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm()"
                        >提交</el-button
                    >
                    <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { login } from "../../services/user";
export default {
    data() {
        return {
            labelPosition: "right",
            loginForm: {
                username: "",
                pwd: "",
            },
        };
    },
    methods: {
        async submitForm() {
            let data = await login(this.loginForm);
            if (data.status == 1) {
                localStorage.setItem("token", data.token);
                this.$router.push("/manage");
            } else {
                this.$alert("登录失败", "警告", {
                    confirmButtonText: "确定"
                });
            }
            console.log(data);
        },
    },
};
</script>

<style>
.box-card {
    width: 600px;
    margin: auto;
}
</style>